<script lang="ts" setup>
import Pagination from './dome/Pagination.vue';
import Dropdown from './dome/Dropdown.vue';
import Input from './dome/Input.vue';
import Select from './dome/Select.vue';
import Table from './dome/Table.vue';
import Tabs from './dome/Tabs.vue';
import Drawer from './dome/Drawer.vue';
import CheckBox from './dome/CheckBox.vue';
import Switch from './dome/Switch.vue';
import Radio from './dome/Radio.vue';
import Breadcrumb from './dome/Breadcrumb.vue';

import { ElMessage } from 'element-plus';

function changeSwith(val) {
  ElMessage({
    type: val ? 'success' : 'error',
    message: 'openEuler',
    duration: 30000,
  });
}
</script>
<template>
  <div class="demo">
    <Pagination />
    <Dropdown />
    <Input />
    <Select />
    <Table />
    <Tabs />
    <Drawer />
    <CheckBox />
    <Radio />
    <Breadcrumb />
    <Switch @change-switch="changeSwith" />
  </div>
</template>

<style scoped lang="scss">
.demo {
  padding-top: var(--o-gap-7);
  display: flex;
  flex-direction: column;
  gap: var(--o-gap-5) 0;
  overflow: hidden;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
